<!DOCTYPE html>
<html>
<head>
<title>控制台</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../resources/css/styles.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<link href="../resources/css/datagrid.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="../resources/component/template.min.js"></script>
<script type="text/javascript" src="../resources/component/jquery.js"></script>
<script type="text/javascript" src="external/jquery-ui.js"></script>
<script type="text/javascript" src="external/jquery.layout-latest.js"></script>
<script type="text/javascript" src="../resources/component/jquery.dataset.js"></script>
<script type="text/javascript" src="external/common.js"></script>
<script type="text/javascript" src="../resources/component/jquery.datagrid.js"></script>
<script type="text/javascript" src="../resources/component/jquery.datatree.js"></script>
<script type="text/javascript" src="../resources/component/jquery.dropdown.js"></script>
<script type="text/javascript">
var outlayout,middlelayout;
$(document).ready(function () {
	outlayout = $('body').layout({ 
				center__paneSelector:	".ui-layout-center" 
			,	north__paneSelector:	".ui-layout-north" 
			,	north__size:			48 
			,	west__size:				180 
			,	spacing_open:			3  // ALL panes
			,	spacing_closed:			3 // ALL panes
			,	north__resizable:       false//可以改变大小 
			,	west__resizable:        false//可以改变大小 
			,   north__closable:        false//可以被关闭 
			,   west__closable:         false//可以被关闭 
		    ,	spacing_open:			0//边框的间隙  

	});

});
 
</script>
</head>
<body >
 	<div class="ui-layout-center">
		<iframe frameborder="0" id="contentIframe" src="sqldefine.html"></iframe>
 	</div>
 	<div class="ui-layout-north header">
 		<div class="logo"></div>
 		<!-- <div class="login">
			XXXXX
			<button class="btn">LOGOUT</button>
		</div> -->
		<div class="login">
			<label>用户:</label> <input type="text" />
			<label>密码:</label> <input type="password"/>
			<button class="btn">登陆</button>
		</div>
 	</div>
 	<div class="ui-layout-west menupanel" >
 		<div class="menu">
 			<nav>
 			<ul>
 				<li><a href="#" id="groupdefine"  onclick="call('editGroup.html')">
 					<span class="icon icon-group"></span>
 					<span class="menu-item-parent">分组定义</span>
 				</a></li>
 				<li><a href="#" class="active" id="sqldefine" onclick="call('sqldefine.html')">
					<span class="icon icon-sql"></span>
					<span class="menu-item-parent">SQLID定义</span>
 				</a></li>
 				<li><a href="#" id="global"  onclick="call('globalparamter.html')">
 					<span class="icon icon-settings"></span>
					<span class="menu-item-parent">	全局参数</span>
 				</a></li>
 				<li><a href="#" id="help"  onclick="call('help.html')">
 					<span class="icon icon-help"></span>
					<span class="menu-item-parent">帮助</span>
 				</a></li>
 			</ul>
 			</nav>
 		</div>
 	</div>
</body>
 
<script>
$(function(){
	// $("li").each(function(index){
	// 	alert(index);
	// });
})
function call(url){
 
	$("#contentIframe").attr("src",url);
}
$(".menu a").click(function(){
	$(this).closest("ul").find("a.active").removeClass("active");
	$(this).addClass("active");
});
</script>
</html>